<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-23 15:16:27
 * @LastEditTime: 2025-06-18 20:03:34
 * @LastEditors: sueRimn
-->


<template>
  <view class="flow-warp container">

    <view class='header d-flex align-items-center justify-content-center'>
      <view class="item" :class="item.id == type ? 'active' : ''" v-for="(item, index) in way" :key="index"
        @click="handleWay(item.id)">
        {{ item.name }}
      </view>
      <view :class='"move position-" + type'></view>
    </view>
    <view class="image">
      <common-image :src="image" :styles="'width: 638rpx; height: 102rpx; display: block; margin: 0 auto;'" />
    </view>

  </view>
</template>

<script>
export default {
  props: {
  },
  data() {
    return {
      type: 1,
      image: "/static/images/home/img_step_2.png",
      way: [
        { id: 1, name: "上门回收", image: "/static/images/home/img_step_2.png" },
        { id: 2, name: "顺丰回收", image: "/static/images/home/img_step_1.png" },
      ],
    }
  },
  methods: {
    handleWay(value) {
      if (this.type === value) { return }
      this.type = value
      this.image = this.way.find(item => item.id === value).image
    },
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.flow-warp {
  padding: 32rpx;
  margin: 32rpx;
  background-color: #fff;
  border-radius: 24rpx;

  .header {
    background: #F6F7F9;
    border-radius: 16rpx;
    height: 76rpx;

    .item {
      width: 50%;
      text-align: center;
      font-size: var(--hui-font-size-26);
      color: var(--hui-color-section);
      font-weight: bold;
      position: relative;
      z-index: 1;

    }

    .active {
      color: var(--hui-color-primary);
    }
  }

  .image {
    margin: 32rpx 0 0 0;
  }

  .move {
    width: 40%;
    height: 60rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
    border-radius: 8rpx;
    position: absolute;
    left: 10%;
    z-index: 0;
    transition: all 0.4s ease-in-out;
  }
  .position-2 {
    left: 50%;
  }
  


}
</style>